<template>
  <div class="adult-check">
    <!-- 手機版的 -->
    <div v-if="isMobile" class="mobile">
      <div class="scroll-wrap">
        <div class="col gap-col-8">
          <div class="font-size-16 font-weight-500 line-height-140">{{ $t('title.underageTip') }}</div>
          <div class="font-size-14 font-weight-400 line-height-140">{{ $t('document.adultCheck.desc') }}</div>
        </div>
        <v-divider class="mb-4 mt-4"></v-divider>
        <div class="col gap-col-8">
          <div class="font-size-20 font-weight-500 line-height-140">
            {{ $t('document.adultCheck.beforeStart') }}
          </div>
          <div class="font-size-16 font-weight-500 line-height-140">
            {{ $t('document.adultCheck.interestedChoice') }}
          </div>
        </div>
        <div class="btns gap-row-12 mt-4 mb-6">
          <button
            class="cancel-btn font-size-16 font-weight-500 line-height-140"
            :class="{ 'hollow-btn': interested.includes(INTERESTED_IN.STRAIGHT) }"
            @click="toggleTarget(INTERESTED_IN.STRAIGHT)"
          >
            {{ $t('interestedIn.straight') }}
          </button>
          <button
            class="cancel-btn font-size-16 font-weight-500 line-height-140"
            :class="{ 'hollow-btn': interested.includes(INTERESTED_IN.GAY) }"
            @click="toggleTarget(INTERESTED_IN.GAY)"
          >
            {{ $t('interestedIn.gay') }}
          </button>
          <button
            class="cancel-btn font-size-16 font-weight-500 line-height-140"
            :class="{ 'hollow-btn': interested.includes(INTERESTED_IN.LESBIAN) }"
            @click="toggleTarget(INTERESTED_IN.LESBIAN)"
          >
            {{ $t('interestedIn.lesbian') }}
          </button>
          <button
            class="cancel-btn font-size-16 font-weight-500 line-height-140"
            :class="{ 'hollow-btn': interested.includes(INTERESTED_IN.TRANS) }"
            @click="toggleTarget(INTERESTED_IN.TRANS)"
          >
            {{ $t('interestedIn.trans') }}
          </button>
        </div>
        <v-divider class="mb-4 mt-4"></v-divider>
        <div>
          <div class="font-size-16 font-weight-500 line-height-140">{{ $t('document.langSelect.title') }}</div>
          <div class="lang-select mb-2 mt-2" @click="showLangOptions = !showLangOptions">
            <div class="d-flex align-center justify-space-between">
              <div class="d-flex justify-center align-center">
                <Icon class="me-2" name="language"></Icon>
                <span class="font-size-14 font-weight-500 line-height-140">{{ $t('title.language') }}</span>
              </div>
              <div class="d-flex justify-center align-center">
                <span class="font-size-14 font-weight-500 line-height-140">{{ localeText }}</span>
                <Icon class="ms-2" name="arrowRight"></Icon>
              </div>
            </div>
            <transition name="expand">
              <div v-show="showLangOptions" class="options">
                <div v-for="l in locales" :key="l.label" class="option" @click="selectLang(l.value)">
                  <span class="font-size-12 font-weight-500 line-height-120">{{ $t(`lang.${l.label}`) }}</span>
                  <Icon v-if="locale === l.value" class="me-1 icon-size-12" name="check"></Icon>
                </div>
              </div>
            </transition>
          </div>
          <div class="font-size-14 font-weight-500 line-height-140 text-center text-input">
            {{ $t('document.langSelect.msg') }}
          </div>
        </div>
        <v-divider class="mb-6 mt-4"></v-divider>
        <div class="btns gap-row-16">
          <button class="cancel cancel-btn bg-gray-x">
            {{ $t('common.cancel') }}
          </button>
          <button class="confirm primary-btn" :disabled="sending" @click="confirm">
            {{ $t('common.confirm') }}
          </button>
        </div>
        <div class="font-size-12 font-weight-400 line-height-120 text-center mt-5">
          {{ $t('document.adultCheck.agreeStatement') }}
        </div>
      </div>
    </div>
    <!-- 桌面版的 -->
    <div v-if="isDesktop" class="desktop">
      <div class="dialog bg-surface">
        <div class="col gap-col-16">
          <div class="font-size-20 font-weight-500 line-height-140 text-center">{{ $t('title.underageTip') }}</div>
          <div class="font-size-16 font-weight-400 line-height-140 text-center">
            {{ $t('document.adultCheck.desc') }}
          </div>
        </div>
        <v-divider class="mb-4 mt-4"></v-divider>
        <div class="col gap-col-8">
          <div class="font-size-20 font-weight-500 line-height-140 text-center">
            {{ $t('document.adultCheck.beforeStart') }}
          </div>
          <div class="font-size-16 font-weight-500 line-height-140 text-center">
            {{ $t('document.adultCheck.interestedChoice') }}
          </div>
        </div>
        <div class="btns gap-row-12 mt-4 mb-6">
          <button
            class="cancel-btn font-size-16 font-weight-500 line-height-140"
            :class="{ 'hollow-btn': interested.includes(INTERESTED_IN.STRAIGHT) }"
            @click="toggleTarget(INTERESTED_IN.STRAIGHT)"
          >
            {{ $t('interestedIn.straight') }}
          </button>
          <button
            class="cancel-btn font-size-16 font-weight-500 line-height-140"
            :class="{ 'hollow-btn': interested.includes(INTERESTED_IN.GAY) }"
            @click="toggleTarget(INTERESTED_IN.GAY)"
          >
            {{ $t('interestedIn.gay') }}
          </button>
          <button
            class="cancel-btn font-size-16 font-weight-500 line-height-140"
            :class="{ 'hollow-btn': interested.includes(INTERESTED_IN.LESBIAN) }"
            @click="toggleTarget(INTERESTED_IN.LESBIAN)"
          >
            {{ $t('interestedIn.lesbian') }}
          </button>
          <button
            class="cancel-btn font-size-16 font-weight-500 line-height-140"
            :class="{ 'hollow-btn': interested.includes(INTERESTED_IN.TRANS) }"
            @click="toggleTarget(INTERESTED_IN.TRANS)"
          >
            {{ $t('interestedIn.trans') }}
          </button>
        </div>
        <v-divider class="mb-4 mt-4"></v-divider>
        <div class="d-flex flex-column align-center">
          <div class="font-size-16 font-weight-500 line-height-140">{{ $t('document.langSelect.title') }}</div>
          <div class="lang-select mb-2 mt-2 pointer" @click="showLangOptions = !showLangOptions">
            <div class="d-flex align-center justify-space-between">
              <div class="d-flex justify-center align-center">
                <Icon class="me-2" name="language"></Icon>
                <span class="lang-title font-size-14 font-weight-500 line-height-140">{{ $t('title.language') }}</span>
              </div>
              <div class="d-flex justify-center align-center">
                <span class="font-size-14 font-weight-500 line-height-140">{{ localeText }}</span>
                <Icon class="ms-2" name="arrowRight"></Icon>
              </div>
            </div>
            <transition name="expand">
              <div v-show="showLangOptions" class="options">
                <div v-for="l in locales" :key="l.label" class="option" @click="selectLang(l.value)">
                  <span class="font-size-12 font-weight-500 line-height-120">{{ $t(`lang.${l.label}`) }}</span>
                  <Icon v-if="locale === l.value" class="me-1 icon-size-12" name="check"></Icon>
                </div>
              </div>
            </transition>
          </div>
          <div class="font-size-14 font-weight-500 line-height-140 text-center text-input">
            {{ $t('document.langSelect.msg') }}
          </div>
        </div>
        <v-divider class="mb-6 mt-4"></v-divider>
        <div class="btns gap-row-16">
          <button class="cancel cancel-btn bg-gray-x">
            {{ $t('common.cancel') }}
          </button>
          <button class="confirm primary-btn" :disabled="sending" @click="confirm">
            {{ $t('common.confirm') }}
          </button>
        </div>
        <div class="font-size-12 font-weight-400 line-height-120 text-center mt-5">
          {{ $t('document.adultCheck.agreeStatement') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useLocalStorage } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useNavStore } from '@/store/nav'
import { $t, locales, setLocale } from '@/i18n'
import { useAdultChecked } from '@/compositions/utils/adultChecked'
import { INTERESTED_IN, LOCAL_STORAGE_KEYS } from '@/constant'
import API from '@/http'

const appStore = useAppStore()
const { isDesktop, isMobile } = storeToRefs(appStore)
const { toggleVideoPlay } = appStore

const navStore = useNavStore()
const { hide: hideNav, show: showNav } = navStore

hideNav()
toggleVideoPlay(false)

const { adultChecked } = useAdultChecked()
const guestInterestedIn = useLocalStorage(LOCAL_STORAGE_KEYS.GUEST_INTERESTED_IN, [])

const interested = ref(
  (() =>
    document
      .querySelector('meta[property="og:interest"]')
      ?.getAttribute('content')
      .match(/^\d+(,\d+)*$/)?.[0]
      .split(',')
      .map((v) => Number(v)) || [INTERESTED_IN.STRAIGHT])(),
)

function toggleTarget(target) {
  const index = interested.value.indexOf(target)
  if (index === -1) {
    interested.value.push(target)
    interested.value.sort((a, b) => a - b)
  } else {
    if (interested.value.length > 1) {
      interested.value.splice(index, 1)
    }
  }
}

const { locale } = storeToRefs(useI18n())
const localeText = computed(() => {
  const v = locale.value
  const key = v.replace('-', '_')
  return $t(`lang.${key}`)
})
const showLangOptions = ref(false)
async function selectLang(langCode) {
  try {
    await setLocale(langCode)
  } catch (e) {
    console.error(e)
  }
}

const sending = ref(false)
async function confirm() {
  if (sending.value) return
  sending.value = true

  const data = { interested_in: interested.value.join(',') }
  await API.Auth.fondness({ data })
  guestInterestedIn.value = interested.value

  adultChecked.value = true

  showNav()
  toggleVideoPlay(true)
}
</script>

<style lang="scss" scoped>
.adult-check {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;

  .mobile {
    width: 100%;
    height: 100%;
    padding: 1rem 1rem 2.5rem;
    background: url('@/assets/images/logo-color.png') rgb(var(--v-theme-background)) no-repeat center 4rem/45%;
    overflow: auto;

    .scroll-wrap {
      padding-top: 9rem;
    }

    .lang-select {
      .options {
        max-height: 18rem;
        bottom: 1.5rem;
        transform-origin: bottom;
      }
    }
  }

  .desktop {
    width: 100%;
    height: 100%;
    background: url('@/assets/images/adult-check-bg-d.png') rgb(var(--v-theme-background)) no-repeat center/contain;
    position: absolute;
    top: 0;

    .dialog {
      width: 29.875rem;
      padding: 1rem;
      border-radius: 0.625rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .lang-title {
        width: 13.125rem;
      }

      .lang-select {
        .options {
          max-height: 12.75rem;
          top: 1.25rem;
          transform-origin: top;
        }
      }

      .btns {
        display: flex;

        button {
          flex-grow: 1;
          padding: 0 0.25rem;
          border: 0.125rem solid transparent;
        }

        .hollow-btn {
          color: white;
          border-color: rgb(var(--v-theme-primary));
        }
      }
    }
  }

  .col {
    display: flex;
    flex-direction: column;
  }

  .btns {
    display: flex;

    button {
      flex-grow: 1;
      padding: 0 0.25rem;
      border: 0.125rem solid transparent;
    }

    .hollow-btn {
      color: white;
      border-color: rgb(var(--v-theme-primary));
    }
  }
}

.lang-select {
  position: relative;

  .options {
    width: 8rem;
    margin-top: 0.5rem;
    background: rgba(var(--v-theme-background), 0.75);
    border: 1px solid rgba(var(--v-theme-input), 0.6);
    border-radius: 0.3125rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    color: white;
    position: absolute;
    right: 0;
    overflow: auto;

    .option {
      padding: 0.5rem 0.5rem 0.5rem 1rem;
      transition: background-color 0.3s;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:hover {
        background-color: rgba(var(--v-theme-gray-x), 0.5);
        color: white;
      }
    }

    &::-webkit-scrollbar {
      display: flex;
      width: 0.25rem;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(var(--v-theme-graydisabled), 0.4);
      background-clip: content-box;
      border-radius: 0.25rem;
    }
  }
}

.expand-enter-active,
.expand-leave-active {
  transition: transform 0.1s;
}
.expand-enter-from,
.expand-leave-to {
  transform: scaleY(0);
}
</style>
